<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>FaceFun_正版精品漫画平台</title>
		<!-- Bootstrap CSS -->
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/public.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/headerandfooter.css}"/>
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
	</head>
		<body>
			<div th:fragment="loginmodal" class="modal fade  bs-example-modal-sm" id="mymodal" >
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title"><img width="30px" th:src="@{/img/logo.png}"/>&nbsp;&nbsp;登录FaceFun</h4>
						</div>
						<div class="modal-body">
							<div role="tabpanel" class="tab-pane fade active in" id="home">
								
							  <form id="loginbox" data-toggle="validator" role="form" data-focus="false">
								  
								  <div style="color:#a94442;margin-bottom:3px;" id="loginerror"></div>
								  <div class="form-group">
								  		<label class="sr-only" for="name">用户名：</label>
									  <div class="input-group">
										<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
								    	<input type="text" class="form-control" name="name" id="name" placeholder="用户名" autocomplete="off" required="required" data-error="用户名不能为空"/>
								     </div>
								     <div class="help-block with-errors"></div>
								  </div>
								  <div class="form-group">
								  	<label class="sr-only" for="pwd">密码：</label>
								  	 <div class="input-group">
								  	 	<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
							    		<input type="password" class="form-control" name="pwd" id="pwd" placeholder="密码" autocomplete="off" required="required" data-error="密码不能为空"/>
								     </div>
								  	<div class="help-block with-errors"></div>
								  </div>
								  <input type="submit" id="Lsub" class="btn btn-group-justified btn-danger" value="登&nbsp;&nbsp;&nbsp;&nbsp;录">
								</form>
						    </div>
						</div>
					</div>
				</div>
			</div>
			<nav th:fragment="whileheader" class="navbar navbar-whilte navbar-fixed-top" role="navigation">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<a class="navbar-brand" th:href="@{/index}">
							<img class="pull-left logo" th:src="@{/img/logo.png}"/>
							<span class="brand icon">FaceFun</span>
						</a>
					</div>
			
						<div class="rightarea">
							<form class="navbar-form" role="search" th:action="@{/search}" method="post">
								<div class="input-group">
									<input class="form-control" autocomplete="off" type="text" name="searchword" placeholder="撩妹联盟：一大堆妹子等你"/>
									<div class="input-group-btn icon">
										<button class="btn btn-danger" type="submit"><span class="glyphicon glyphicon-search"></span></button>
									</div>
								</div>
							</form>
							 
							<ul class="nav navbar-nav" th:if="${session.user==null}">
									
									
										<li><a class="loginbtn"  href="#mymodal"  data-backdrop="static" data-toggle="modal" data-keyboard="false">登录</a></li>
										<li><span class="sperator">|</span></li>
										<li><a class="registerbtn " th:href="@{/user/regist}">注册</a></li>
									
										<li id="shelf">
											<a href="#mymodal" data-backdrop="static" data-toggle="modal" data-keyboard="false">书架&nbsp;</a>
											<div class="pop">
												<div class="arrow"></div>
												<div class="loginalert grey">收藏喜欢的漫画，随时追更<a href="#mymodal" data-toggle="modal" data-backdrop="static" data-keyboard="false" class="btn btn-danger">点击登录</a></div>
											</div>
										</li>
										<li><a href="#mymodal" data-backdrop="static" data-toggle="modal" data-keyboard="false">消息</a></li>
							</ul>
							<ul class="nav navbar-nav" th:if="${session.user!=null}" th:object="${session.user}">
									  <li class="headpic" id="headpic">
										<a th:href="@{/user/eidtor}">
											<img class="img-circle" height="35px" width="35px" th:src="@{*{headimg}}" />
										</a>
										<div class="pop">
										  <div class="headtitle">[[*{name}]]</div>
										  <a th:href="@{/user/exit}" class="btn btn-danger"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;退出登录</a>'
									  	</div>
									  </li>
									  <li id="shelf">
											<a th:href="@{/store}" id="storebtn">书架&nbsp;<span class="badge mybadge"></span></a>
											<div class="pop" id="storelist"></div>
										</li>
								 
								
								<li><a href="#">消息</a></li>
				
							</ul>
						</div>
						
			
				</div>
			</nav>
			<div th:fragment="topbanner" class="topbanner">
				<a href="" title=""></a>
			</div>
			
			<div class="titlebar titlebar-shadow"> 
				<div class="container">
					
					<div class="row"  >
						<a class="col-xs-1 text-center active" >首页<span class="line"></span></a>
						<a class="col-xs-1 text-center" th:href="@{/category}">分类<span class="line"></span></a>
						<a class="col-xs-1 text-center" th:href="@{/update}">更新<span class="line"></span></a>
						<a class="col-xs-1 text-center" th:href="@{/over}">完结<span class="line"></span></a>
						<div class="row col-lg-2 pull-right text-right hidden-xs">
							<a href="" title=""><small>作者投稿</small></a>丨<a href="" title=""><small>福利政策</small></a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="gallery">
				<div id="carousel-id" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">
						<li data-target="#carousel-id" data-slide-to="0" class=""></li>
						<li data-target="#carousel-id" data-slide-to="1" class=""></li>
					</ol>
					<div class="carousel-inner">
						<div class="item">
							<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" th:src="@{/img/banner01.jpg}"/>
						</div>
						<div class="item active">
							<a th:href="@{/cartoon/4}" title="神兽退散">
								<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" th:src="@{/img/banner02.jpg}"/>
							</a>
						</div>
						
					</div>
					<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
					<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>
			
			<!-- 分类列表-->
			<div class="typebar">
				<div class="container">
					<div class="row">
						 <div class="col-xs-8">
							 <div class="row">
							 	<span th:each="t:${types}" class="col-xs-2"><a th:attr="href=@{/category(tc=${t.id})}">[[${t.name}]]</a></span>
							 </div>	
                     </div> 
					</div>
				</div>
			</div>
			  



			<!-- content主要内容-->
			<div class="content">
				<div class="container">
					<!--  热萌推荐 -->
					<div class="row">
						<div class="col-xs-9 panel">
							<h3><span class="glyphicon glyphicon-thumbs-up icon"></span>&nbsp;&nbsp;热门推荐</h3>
							<hr/>
							<div class="row">
									<div class="col-xs-4 " th:each="c,cStatu:${ranklist}" th:if="${cStatu.index} &lt;6">
										<a th:href="@{'/cartoon/'+${c.id}}">
											<img class="img-rounded img-responsive" width="100%" th:src="${c.img}"/>
									
									 		<h5 class="el">[[${c.name}]]<br/>
									 		<small>[[${c.msg}]]</small></h5>
								  		</a>
									</div>
								
							</div>
						</div>
						<div class=" col-xs-3" th:fragment="ranklist">
							<div class="row">
								<div class="col-xs-offset-1 col-xs-11 mylist">
									<h4>热作排行</h4>
									<hr class="redline"/>
										<div class="listitem" th:each="c,cStatu:${ranklist}" th:if="${cStatu.index} &lt;9">
											<div class="listline" th:if="${cStatu.index} &lt;3" th:classappend="topthree">
												
												<div class="title el"><div class="numbericon" th:text="${cStatu.index+1}"></div>[[${c.name}]]</div>
												<span class="score">
													<span class="glyphicon glyphicon-fire active"></span>&nbsp;[[${c.score}]]
												</span>
											</div>
											<div class="row listinfo" th:if="${cStatu.index} &lt;3" th:classappend="topthree">
												<a th:href="@{'/cartoon/'+${c.id}}">
													<div class="numbericon"><span class="number" th:text="${cStatu.index+1}"></span></div>
													<img class="col-xs-6 img-rounded" th:src="${c.pic}"/>
												</a>	
										      <div class="caption">
										      	 <a th:href="@{'/cartoon/'+${c.id}}"><h4 class="el" th:text="${c.name}"></h4></a>
										       	 <p class="grey">[[${c.author}]]<br/>
										   			更至<a class="active">&nbsp;[[${c.latestNum}]]话</a>
										   		</p>
										   		<span class="glyphicon glyphicon-fire  active"></span>&nbsp;[[${c.score}]]
										      </div>
											</div>
										</div>
									
									
										<div class="listitem" th:each="c,cStatu:${ranklist}" th:if="${cStatu.index} &gt;3 and ${cStatu.index} &lt;9">
											<div class="listline">
												
												<div class="title el"><div class="numbericon" th:text="${cStatu.index+1}"></div>[[${c.name}]]</div>
												<span class="score">
													<span class="glyphicon glyphicon-fire active"></span>&nbsp;[[${c.score}]]
												</span>
											</div>
											<div class="row listinfo">
												<a th:href="@{'/cartoon/'+${c.id}}">
													<div class="numbericon"><span class="number">[[${cStatu.index+1}]]</span></div>
													<img class="col-xs-6 img-rounded" th:src="${c.pic}" />
												</a>	
										      <div class="caption">
										      	 <a th:href="@{'/cartoon/'+${c.id}}" ><h4 class="el" th:text="${c.name}"></h4></a>
										       	 <p class="grey">[[${c.author}]]<br/>
										   			更至<a class="active">&nbsp;[[${c.latestNum}]]话</a>
										   		</p>
										   		<span class="glyphicon glyphicon-fire  active"></span>&nbsp;[[${c.score}]]
										      </div>
											</div>
										</div>
				
								</div>
							</div>
						</div>
					</div>
					

		
					<div class="adv">
						<a href="" alt="">
							<img class="img-responsive" src="https://easyread.nosdn.127.net/pic2017042414b901a5a3024118ae59adb06be42c2b.jpg"/>
						</a>
					</div>
				


					<!-- 新作推荐-->
					<div class="row panel">
						<div class="col-xs-12">
							<h3><span class="glyphicon glyphicon-calendar icon"></span>&nbsp;&nbsp;新作推荐</h3>
							<hr/>
						</div>
						
					
						<div class="col-xs-5">
								<div class="media row" th:object="${ranklist.get(6)}">
									<a th:href="@{'/cartoon/'+*{id}}" class="col-md-12 pull-left">
										<img width="100%" th:src="*{img}" class="img-rounded"/>
									</a>
									<div class="media-body col-md-12">
										<a th:href="@{'/cartoon/'+*{id}}">
											<h3 class="text-center el">[[*{name}]]<br/><small>[[*{msg}]]</small></h3>
										</a>
										<p class="info"><span class="ti">简介：</span>[[*{info}]]</p>
										<p><span class="ti">作者：</span><a class="active">[[*{author}]]</a></p>
										<p><span class="ti">最新话：</span><a class="active">[[*{latestNum}]]话</a></p>
										<a th:href="@{'/cartoon/'+*{id}}" class="btn btn-danger pull-right readbtn"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;开始阅读</a>
									</div>
								</div>
						</div>
						
						<div class="col-xs-7">
							<div class="row">
								<div class="col-xs-6 " th:each="c,cStatu:${ranklist}" th:if="${cStatu.index}&gt; 6">
									<a th:href="@{'/cartoon/'+${c.id}}">
										<img class="img-rounded img-responsive" width="100%" th:src="${c.img}"/>
								 		<h5 class="el">[[${c.name}]]<br/>
								 		<small>[[${c.msg}]]</small></h5>
							  		</a>
								</div>	

							</div>
						</div>
					</div>


					<div class="adv">
						<a href="" alt="">
							<img class="img-responsive" src="https://easyread.nosdn.127.net/pic20170425509ccc61b5ae4d76a5563010696da442.jpg"/>
						</a>
					</div>
	

					<!-- 合作伙伴 -->
					<div class="row panel">
						<div class="col-xs-12">
							<h3><span class="glyphicon glyphicon-user icon"></span>&nbsp;&nbsp;合作伙伴</h3>
							<hr/>
						</div>

						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/02/18/920dd8cdccfe4782b81803c728dea524.png?imageView" />
							</a>
						</div>
						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/10/09/7ae934724a744ea786b8292506dc9252.png?imageView"/>
							</a>
						</div>
						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/02/18/46caf64866ec43738f31f56f7f3a2116.png?imageView" />
							</a>
						</div>
						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/09/19/989aa0c023b24761b0b21f9b410c05b2.png?imageView"/>
							</a>
						</div>
						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/02/18/847f262a11ff489c8cb2f95b710532e7.jpg?imageView"/>
							</a>
						</div>
						<div class="col-xs-3 frienditem">
							<a href="" title="">
								<img src="https://easyread.nosdn.127.net/pic/2016/02/18/0a38f79cbd8140bcbcdbba0856f1b60a.png?imageView"/>
							</a>
						</div>
					</div>
				</div>
			</div>
			
			<footer  th:fragment="footer">
				<div class="container">
					<div class="row text-center">
						<p>FaceFun首页 - 公司简介 - 客户服务 - 相关法律 - 网站导航 - 意见反馈 - 帮助中心 - 作者专区 - 访问手机版<br/>
						ICP证粤B2-20090191 增值电信业务经营许可证B2-20090058<br/>
						FaceFun公司版权所有©1997-2017</p>
					</div>
				</div>
			</footer>
			
			<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
			 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
			<!-- Bootstrap JavaScript -->
			<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
			<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
			<script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
			
			<script th:src="@{/js/topbar.js}" type="text/javascript"></script>
	 		<script th:src="@{/js/index.js}" type="text/javascript" ></script>
		</body>
</html>